DHTML JavaScript Tree samples
Initialize Tree from HTML
To do automatic initialization:
dhtmlXTree_start.js should be included into pagetop DIV element should have class attribuyte set to dhtmlxTree
some attributes of top DIV element will define tree specific properties
setImagePath - set path to images used by tree
id - name of javascript variable referenced to tree object
Initilize from list
Root
Child1
Child2
Bold Italic
Root
Child1
Child2
Bold Italic
<![CDATA[
<div
class="dhtmlxTree"
id="treeboxbox_tree"
setImagePath="../imgs/"
style="width:250px; height:218px;overflow:auto;">
<ul>
<li>Root</li>
<ul>
<li>Child1
<ul>
<li>Child 1-1</li>
</ul>
</li>
<li>Child2</li>
<li><b>Bold</b> <i>Italic</i></li>
</ul>
</li>
</ul>
</div>
]]>
Initialize from inline XML structure
It is possible to use standard dhtmlxTree XML structure enclosed in
XMP
tag inside DIV element which is tree container.
For more details about dhtmlxTree XML structure see
User Guide
<![CDATA[
<item text="Root" open="1" id="11">
<item text="Child1" select="1" open="1" id="12">
<item text="Child1-1" id="13"/>
</item>
<item text="Child2" id="14"/>
<item id="15" text="Text"/>
</item>
]]>
<![CDATA[
<div id="treeboxbox_tree2" setImagePath="../imgs/" class="dhtmlxTree" >
<xmp>
<item text="Root" open="1" id="11">
<item text="Child1" select="1" open="1" id="12">
<item text="Child1-1" id="13"/>
</item>
<item text="Child2" id="14"/>
<item id="15" text="Text"/>
</item>
< /xmp>
</div>
]]>
Initialize from HTML using script command
It is possible to convert existing html structure with script command
Root
Child1
Child2
Bold Italic
Convert
<![CDATA[
//1st parameter is id of DIV element to initialize tree from.
var myTree = dhtmlXTreeFromHTML('listBox');
]]>
Go to the dhtmlxTree main page or Close this page